<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/detail-page.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <title>Document</title>
</head>
<body>
  <!-- 头部 -->
  <div class="header">
    <div class="top">
        <ul>
            <li>
                <a href="./name.html">登录 &nbsp;&nbsp;|</a>
            </li>
            <li>
                <a href="#">免费注册</a>
            </li>
            <li>
                <a href="#">关注我们</a>
                <i class="iconfont">&#xe8f2;</i>
                <div class="photo">
                    <div class="photo1"></div>
                </div>
            </li>
            <li>
                <a href="#">下载APP</a>
                <i class="iconfont">&#xe8f2;</i>
                <div class="photo3">
                    <div class="photo4"></div>
                </div>
            </li>
            <li>
                <a href="#">帮助中心</a>
            </li>
            <li>
                <a href="#">收藏</a>
                <i class="iconfont">&#xe628;</i>
            </li>
        </ul>
    </div>
</div>
<!---------- 搜索框 --------------->
<div class="introduce">
    <div class="middle">
        <div class="logo">
            <h2>
                <a href="./index.html" title="茶七网"></a>
            </h2>
        </div>
        <div class="search">
            <input type="text" value="搜素所有商品" id="search-1">
            <button type="submit" class="btn">搜索</button>
        </div>
        <div class="hot">
            <span>热搜榜：</span>
            <a href="#">大红袍</a>
            <a href="#">铁观音</a>
            <a href="#">金骏眉</a>
        </div>
        <div class="shopping">
            <a href="#">
                <i class="iconfont">&#xe600;</i>
                购物车 
                <i class="iconfont">&#xe637;</i>
            </a>
            <div class="shopping-1">
                <span>您的购物车没有商品</span>
            </div>
        </div>
        <div class="telephone">
            <i class="iconfont">&#xe507;</i>
            <span class="Hotline">订购热线</span>
            <br>
            <em>
                400-9993-51
                <b>3</b>
            </em>
        </div>
    </div>   
</div>
<!--------导航条------->
<div class="nav">
    <div class="cont">
        <div class="nav-left">
            <p class="navs">
                <i class="iconfont">&#xe625;</i>
                全部商品分类
            </p>
            <div class="menu">
                <ul>
                <li class="timer">
                <i class="iconfont">&#xe60a;</i>
                <span>全部好茶</span>
                <em class="iconfont">&#xe637;</em>
                    </li>
                    <li class="post">
                        <p>热销</p>
                        <span>金骏眉</span>
                        <span>铁观音</span>
                        <span>大红袍</span>
                        <span>龙井</span>
                        <span>黄山毛峰</span>
                        <span>滇红</span>
                        <span>漳平水仙</span>
                        <span>正山小种</span>
                        <ul class="ht">
                            <li>
                        <span>龙井</span>
                        <span>黄山毛峰</span>
                        <span>碧螺春</span>
                        <span>雀舌</span>
                        <span>太平猴魁</span>
                        <span>六安瓜片</span>       
                            </li>
                                
                            <li>
                        <span>铁观音</span>
                        <span>武夷岩茶</span>
                        <span>漳平水仙</span>
                            </li>
                            <li>
                        <span>金骏眉</span>
                        <span>云南滇红</span>
                        <span>正山小种</span>
                        <span>祁门红茶</span>
                        <span>政和工夫</span>
                        <span>坦洋工夫</span>
                        </li>
                        <li>
                        <span>白牡丹</span>
                         <span>牡丹王</span>
                        <span>白毫银针</span>
                        <span>贡眉</span>
                        </li>
                        <li>
                            <span>生茶</span>
                            <span>熟茶</span>
                        </li>
                        <li>
                            <span>茉莉花茶</span>
                            <span>花草茶</span>
                        </li>
                        <li>
                            <span>紫砂壶</span>
                            <span>建盏</span>
                            <span>功夫茶具</span>
                            <span>茶具电器</span>
                            <span>茶具配件</span>
                            <span>旅行茶具</span>
                            <span>整套茶具</span>
                            <span>整套茶具</span>
                            <span>茶盘</span>
        <img src="./images/banner1.png" alt="">
                        </li>   
                            </li>
                        </ul>
                    </li>
                  
             
                    <li class="post">
                        <p>茶类</p>
                        <span>信阳毛尖</span>
                        <span>午子仙毫</span>
                        <span>南京雨花茶</span>
                        <span>庐山雨雾</span>
                        <span>惠明茶</span>
                        <span>平水珠茶</span>
                        <ul class="ht">
                            <li>
                        <span>英山云雾茶</span>
                        <span>恩施玉露</span>
                        <span>竹叶青茶</span>
                        <span>径山茶</span>
                        <span>休宁松萝</span>
                        <span>六安瓜片</span>       
                            </li>
                                
                            <li>
                        <span>老竹大方</span>
                        <span>敬亭绿雪</span>
                        <span>仙人掌茶</span>
                            </li>
                            <li>
                        <span>西湖龙井</span>
                        <span>洞庭湖碧螺春</span>
                        <span>蒙顶茶</span>
                        <span>顾渚紫笋</span>
                        <span>桂平西山茶</span>
                        <span>坦洋工夫</span>
                        </li>
                        <li>
                        <span>白牡丹</span>
                         <span>牡丹王</span>
                        <span>白毫银针</span>
                        <span>贡眉</span>
                        </li>
                        <li>
                            <span>生茶</span>
                            <span>熟茶</span>
                        </li>
                        <li>
                            <span>茉莉花茶</span>
                            <span>花草茶</span>
                        </li>
                        <li>
                           
                           <img src="./images/citiao.jpg" alt="">
                        </li>   
                            </li>
                        </ul>          
                    </li> 

                <li class="timer">
            <i class="iconfont">&#xf01d0;</i>
            <span>热销茶具</span>
         <em class="iconfont">&#xe637;</em>
                        </li>
                    
                     <li class="post">
                         <p>推荐</p>
                        <span>紫砂壶</span>
                        <span>建盏</span>
                        <span>飘逸杯</span>
                        <span>功夫茶具</span>
                        <span>配件</span>
                        </li>
                        <li class="timer">
                            <i class="iconfont">&#xe69a;</i>
                    <span>手艺</span>
                    <em class="iconfont">&#xe637;</em>
                                        </li>
                        <li class="post">
                        <span>推荐</span>
                        <span>根雕</span>
                        <span>小叶紫檀</span>
                        </li>
                    </li>

                </ul>
            </div>  
            </div>

            <div class="nav-cont">
                <ul>
                    <li>
                    <a href="#">首页</a>
                        </li>
                    <li>
                        <a href="">金骏眉</a>
                    </li>
                    <li>
                        <a href="">大红袍</a>
                    </li>
                    <li>
                        <a href="">铁观音</a>
                    </li> 
                    <li>
                        <a href="">龙井</a>
                    </li>
                    <li>
                        <a href="">茶具</a>
                    </li>
                    <li>
                        <a href="">茶师亲制</a>
                    </li>
                    <li>
                        <a href="">茶币商城</a>
                    </li>
        <li class="nav-last">
            <i>
                <img src="./images/hot.gif" alt="">
            </i>
            <a href="#">
                <img src="./images/ctbl.gif" alt="">
            </a>
                    </li>
            </ul>
        </div>
    </div>
</div>

    <!--------- 放大镜--------->

    <div class="content">
        <div class="content-half">
            <div class="content-left">
                <div class="small_box">
                    <img src="./images/tea1.jpg" alt="">
                    <span></span>
                    <em></em>
                </div>
                <ul>
    <li>
        <img src="./images/teas1.jpg" alt="">
    </li>
    <li>
        <img src="./images/teas2.jpg" alt="">
    </li>
    <li>
        <img src="./images/teas3.jpg" alt="">
    </li>
    <li>
        <img src="./images/teas4.jpg" alt="">
    </li>
    <li>
        <img src="./images/teas5.jpg" alt="">
    </li>
                </ul>
                <div class="big_box">
                    <img src="./images/teal1.jpg" alt="">
                </div>
            </div>

            <div class="content-box">
                <div class="content-item">
                    <div class="item">
                <h1>浓郁豆香龙井1号</h1>  
                <p class="date">外形一般但入口顺且浓郁</p>
                    </div>
            <div class="item-cont">
            <div class="items">
                <div class="t1">茶七价</div>
                <div class="t2">
            <strong>
                ¥<span class="data-1">68.00</span>
            </strong>
                </div>
                <div class="t3">
            市场价
            <del>128.00</del>
                </div>
            </div>
        <div class="cle">
            <div>
        <span class="list">顾客评分：</span>
        <span class="list-1">★★★★★
            <em>4.8 分 &nbsp;</em>
            <a href="#">(已有296人评分)</a>
        </span>
            </div>
            <div>
            <span class="list-2">
            <i>
                <img src="./images/teacur.png" alt="">
            </i>
            购买立返
            <em class="orange">17</em>
            茶币    
            </span>
            </div>
        </div>
        <div class="cle-1">
            <div>
        <p class="left">品级：</p>
        <p>登堂入室</p>
            </div>
            <div>
                <p class="left">产地：</p>
                <p>浙江</p>
            </div>
            <div>
                <p class="left">保质期：</p>
                <p>18个月</p>
            </div>
        </div>
        <div class="cle-2">
            <div class="tity1">
        <span class="show">数 &nbsp; 量：</span>
        <div class="skunum">
    <span>
        <i class="iconfont">&#xeaf5;</i>
            </span>
    <input id="Quantity" min="1" type="text" value="1">
    <span>
        <i class="iconfont">&#xe727;</i>
        <cite class="storage">件</cite>
    </span>
        </div>
            </div>
            <div class="tity2">
            <input type="button" value="立即购买" class="btn">
            <input type="button" value="加入购物车" class="btn1">
            </div>
        </div>
            </div>
                </div>
          
            <div class="item-bottom">
            <div class="bottom-1">
            <i class="iconfont">&#xe655;</i>
            48小时发货
            </div>
        <div class="bottom-1">
            <i class="iconfont">&#xe621;</i>
            7天无理由退货
        </div>
        <div class="bottom-1">
            <span class="top-bun">
    <a href="#" class="bds_more" data-cmd="more"></a>
    <i class="iconfont">&#xe7d9;</i>
    <i class="iconfont">&#xe608;</i>
    <i class="iconfont">&#xe649;</i>
    <i class="iconfont">&#xe611;</i>
    <i class="iconfont">&#xe641;</i>
    
            </span>
        </div>
            </div>
            </div>

        <div class="content-right">
        <p>
        看了又看
        <a href="">
            <i class="iconfont">&#xe68c;</i>
        </a>
    </p>
    <div class="bod">
        <h2>
            <a href="">
            <img src="./images/0098677_0 (1).jpeg" alt="">
            <p>￥138</p>
            </a>
        </h2>
            <h2>
            <a href="">
            <img src="./images/0137123_0.jpeg" alt="">
            <p>￥98</p>
            </a>
            </h2>
            <h2>
                <a href="">
                <img src="./images/0014029_0.jpeg" alt="">
                <p>￥138</p>
                </a>

            </h2>
    </div>
        </div>
            </div>
       
    </div>







    














</body>
<script src="./libs/jquery.js"></script>
<script src="./js/detail-page.js"></script>
<script>
   
</script>
</html>